<template>
  <div class="header-radio-program mt-2 mb-2 ">
    <div class="flex items-center">
      <span class="i-ic-round-music-video" />
      <span class="yu-textColor-hover" @click="jumpDjRadio(radioProgramInfo?.radio?.id)">{{ radioProgramInfo?.radio?.name }}</span>
    </div>
    <div class="flex items-center mt-2 flex-wrap">
      <span class="border-1 yu-titleColor yu-textColor-hover text-xs pl-1 pr-1">{{ radioProgramInfo?.radio?.category }}</span>
      <h4 class="mt-0 mb-0">{{ radioProgramInfo?.radio?.name }}</h4>
      <span class="ml-1 mr-1">第{{ radioProgramInfo?.radio?.programCount }}期</span>
      <span class="text-xs">创建时间 {{ timestampToYMD(radioProgramInfo?.radio?.lastProgramCreateTime) }}</span>
      <span class="text-xs ml-1">播放：<span class="yu-textColor-active">{{ radioProgramInfo?.listenerCount }}</span> 次</span>
    </div>
 </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {timestampToYMD} from "@/utils/index"

const router = useRouter()

const props = defineProps({
  radioProgramInfo: Object
})
console.log(props.radioProgramInfo)

// 跳转到电台详情
const jumpDjRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
